<template>
  <div>
    <ul class="NavBar" v-show="$store.state.isShowNavBar">
      <li v-for="item in NavBarList" :key="item" class="NavBarItem" @click="handleTo(item.path)">{{ item.name }}</li>
    </ul>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      NavBarList: [
        {
          name: '电影',
          path: '/move'
        },
        {
          name: '影院',
          path: '/cinemas'
        },
        {
          name: '资讯',
          path: '/aboutView'
        },
        {
          name: '用户',
          path: '/users'
        },
      ],
    }
  },
  methods: {
    handleTo(path){
      this.$router.push({
        path,
      })
    }
  },
}
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: left;
  color: #2c3e50;
}
.van-cell__value{
    text-align: left !important;
}
.NavBar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  z-index: 100;
  background-color: white;
  .NavBarItem {
    flex: 1;
    padding: 8px 0;
  }
}
</style>
